<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>14-父子通讯之子传父</title>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <my-foo></my-foo>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    Vue.component('my-foo', {
      template: `<div>
          <h2>这是一个父组件foo组件</h2>
          <p>儿子这个月的工资:{{salary}}</p>
          <hr>
          // <my-son :getData="getSalary"></my-son>

          // 以下的@getData称为自定义事件，因为@是用来注册事件的，而getData在原生DOM事件中是不存在的，因此称为自定义事件
          /* <my-son @getData="getSalary"></my-son>*/
          <my-son @get-data="getSalary"></my-son>
        </div>`,
      data() {
        return {
          salary: ''
        }
      },
      methods: {
        getSalary(money) {
          this.salary = money
        }
      }
    })
    Vue.component('my-son', {
      template: `<div>
          <h3>这是一个儿子组件</h3>
          <input type="button" value="发工资了" @click="send">
        </div>`,
      data() {
        return {
          salary: 20000
        }
      },
      methods: {
        send() {
          // 函数只要被调用，就会回到声明的位置执行内部代码
          // this.getData(this.salary)

          // this.$emit(子组件上的自定义事件名称,后面是跟着的参数)
          // this.$emit('getData',this.salary)

          // 推荐使用中划线的方式 blur click dblclick
          this.$emit('get-data',this.salary)
        }
      },
      // props: ['getData']
    })
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      }
    })

    /**
     * 子传父:
     * 1. 本质还是父传子 
     * 2. 因为父组件中还是嵌套着子组件，还是可以在父组件中找到子组件，因此可以在当前的子组件上，添加一个自定义事件，自定义事件的值为父组件中的函数体
     * 3. 在子组件内使用this.$emit(自定义事件名称,参数)的方式来触发
     * 4. 需要注意的是：自定义事件如何写，在使用$emit()触发的时候，就如何触发
     * 
     * 
     * 
     **/


    //  函数声明了之后，只有调用的时候才会执行内部代码 
    function fn(n1, n2) {
      let sum = n1 + n2
      return sum
    }
    //  fn(10,20)
  </script>
</body>
</html>